<template>
<div class="app-container">
  <el-form :model="form" >
    <el-row>
      <div class="demo-input-suffix">
        时间类型：
        <el-select v-model="form.type" placeholder="请选择">
          <el-option label="注册时间" value="1"></el-option>
          <el-option label="商家审核时间" value="2"></el-option>
        </el-select>
        开始时间：
        <el-date-picker
          v-model="form.date1"
          type="datetime"
          placeholder="选择开始时间">
        </el-date-picker>
        结束时间：
        <el-date-picker
          v-model="form.date2"
          type="datetime"
          placeholder="选择结束时间">
        </el-date-picker>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </div>
    </el-row>
    <el-row>
      <div class="demo-input-suffix">
        <el-select v-model="form.per" placeholder="请选择">
          <el-option label="服务人员账户" value="服务人员账户"></el-option>
          <el-option label="审核人账户" value="审核人账户"></el-option>
        </el-select>
        <el-input type="number" v-model="form.mes1" v-if="this.form.per == '服务人员账户'" placeholder="请输入服务人员"></el-input>
        <el-input type="number" v-model="form.mes2" v-if="this.form.per == '审核人账户'" placeholder="请输入审核人账户"></el-input>
        状态：
        <el-select v-model="form.state" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="商家已审核" value="2"></el-option>
          <el-option label="商家未审核" value="1"></el-option>
          <el-option label="审核未通过" value="3"></el-option>
          <el-option label="关闭" value="4"></el-option>
          <el-option label="已冻结" value="5"></el-option>
        </el-select>
      </div>
    </el-row>
  </el-form>

  <el-table :data="tableData" id="out-table">
    <el-table-column type="selection" align="center"></el-table-column>
    <el-table-column type="index" align="center"></el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="left" width="180">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          v-if="scope.row.state !== '关闭'"
          @click="gotoDetail(scope.$index)">详情</el-button>
        <el-button
          size="mini"
          type="warning"
          v-if="scope.row.state == '审核成功'"
          @click="gotoDetail(scope.row._id)">冻结</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
  </div>
</div>
</template>

<script>
import request from '@/utils/request'
import { formatDate,toDate,toUnix } from '@/utils/index'
import { validateOrderStatus,busniessTestStatus,Excel } from '@/utils/validate'
export function getList(mes) {
  return request({
    url: '/v1/admin/servicePersonal/list',
    method: 'post',
    data: mes
  })
}
export default {
  created: function() {
    let n = {
      page: 1,
      size: 10
    }
    this.getMes(n)
  },
  methods: {
    getMes(item) {
      getList(item).then(res => {
        if (res.code === 200) {
          console.log(res);
          if (res.data.list.length) {
            this.setTableData = res.data.list
            this.totals = res.data.totalNumber
            res.data.list.filter(item => {
              const val = {
                name: item.service_personal_name || '--',
                tel: item.service_personal_phone || '--',
                id: item.service_personal_identity_card_Number || '--',
                age: item.service_personal_age || '--',
                sex: item.service_personal_sex || '--',
                area: item.service_personal_area || '--',
                busniess: item.bussiness_id ? item.bussiness_id.company_name : '--',
                account: item.bussiness_id ? item.bussiness_id.business_mobile_phone : '--',
                skill: item.service_skill_array.join() || '--',
                rTime: item.bussiness_id ? formatDate(new Date(item.bussiness_id.create_time*1000), 'yyyy-MM-dd hh:mm') : '--',
                state: busniessTestStatus(item.service_personal_status),
                test: item.check_time ? formatDate(new Date(item.check_time*1000), 'yyyy-MM-dd hh:mm') : '--'
              }
              this.tableData.push(val)
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      this.tableData = []
      let obj = {
        page: 1,
        size: val,
      }
      this.size = val
      this.getMes(obj)
    },
    handleCurrentChange(val) {
      this.tableData = []
      let obj = {
        page: val,
        size: this.size,
      }
      this.getMes(obj)
    },
    onSubmit() {
      this.tableData = []
      const n = {
        size: this.size,
        page: 1,
        search_time_type: this.form.type,
        search_begin_time: this.form.date1 ? toUnix(toDate(this.form.date1)) : '',
        search_end_time: this.form.date2 ? toUnix(toDate(this.form.date2)) : '',
        service_personal_account: this.form.mes1,
        check_bussiness_account: this.form.mes2,
        service_personal_status: this.form.state
      }
      console.log(n)
      this.getMes(n)
    },
    toSex(i) {
      if(i == 1){
        return '男'
      }else if(i == 2){
        return '女'
      }else {
        return '--'
      }
    },
    gotoDetail(index) {
      localStorage.setItem('staffMes', JSON.stringify(this.setTableData[index]))
      console.log(this.setTableData[index])
      this.$router.push({
        path: '/staffList/staffMes'
      })
    },
    exportExcel() {
      Excel('#out-table')
    },
  },
  data() {
    return {
      form: {
        state: '',
        type: '',
        date1: '',
        date2: '',
        per: '服务人员账户',
        mes1: '',
        mes2: ''
      },
      tableList: [
        { name: '服务人员姓名', value: 'name' },
        { name: '手机号', value: 'tel' },
        { name: '身份证号', value: 'id' },
        { name: '年龄', value: 'age' },
        { name: '性别', value: 'sex' },
        { name: '所属区域', value: 'area' },
        { name: '签约商家', value: 'busniess' },
        { name: '商家审核人账户', value: 'account' },
        { name: '服务技能', value: 'skill' },
        { name: '注册时间', value: 'rTime' },
        { name: '商家审核状态', value: 'state' },
        { name: '审核时间', value: 'test' },
      ],
      tableData: [],
      currentPage: 1,
      size: 10,
      totals: 0
    }
  }
}
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .el-date-picker{
    width:200px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
  .el-select{
    width: 160px;
  }
</style>
